/**
 * 创元汇 - 公共详情页
 * https://menger.me
 * @Meng
 */

import React, { Component } from 'react';
import {
    View,
    Text,
    Image,
    WebView,
    Dimensions,
    StyleSheet,
    StatusBar,
    TouchableOpacity,
    ScrollView
} from 'react-native';
import NetRequest from '../../utils/utilsRequest'
import ServicesApi from '../../constants/ServicesApi'
import GlobalStyles from '../../constants/GlobalStyles'
import NavigationBar from '../../components/common/NavigationBar'
import UtilsView from '../../utils/utilsView'
import { toastShort, consoleLog } from '../../utils/utilsToast'
import ShareUtils from '../../components/common/shareUtils'

import Pdf from 'react-native-pdf';

export default class PdfWebDetail extends Component {

    constructor(props){
        super(props);
        const { params } = this.props.navigation.state;
        this.state={
            url: params.link,
            title: params.title,
        }
        // this.netRequest = new NetRequest();
    }

    componentDidMount(){
        this.loadNetData();
    }

    onBack = () => {
        this.props.navigation.goBack();
    }

    onSharePress = () => {
        this.setState({
            showSharePop: !this.state.showSharePop
        })
    }

    updateState= (state) => {
        if (!this) { return };
        this.setState(state);
    }

    loadNetData = () => {

    }
// rightButton = {UtilsView.getRightBlackButton(() => this.onSharePress())}
    render() {
        let navigationBar = {
            backgroundColor: '#fff',
            borderBottomColor: '#f2f2f2',
            borderBottomWidth: 1,
        };
        return (
            <View style={styles.container}>
                <NavigationBar
                    title = {this.state.title}
                    style = {navigationBar}
                    titleStyle = {{color: '#333333'}}
                    leftButton = {UtilsView.getLeftBlackButton(() => this.onBack())}
                />
                <StatusBar
                    animated = {true}
                    hidden = {false}
                    backgroundColor = {'transparent'}
                    translucent = {true}
                    barStyle = {'dark-content'}
                />
                <ScrollView 
                    scrollsToTop={true} 
                    ref={(scrollView) => { _scrollView = scrollView; }} 
                    style={{flex: 1, height: GlobalStyles.height, backgroundColor: '#f1f2f3'}}>

                    <Pdf
                        source={{uri: this.state.url, cache:true}}
                        onLoadComplete={(numberOfPages,filePath)=>{
                            console.log(`number of pages: ${numberOfPages}`);
                        }}
                        onPageChanged={(page,numberOfPages)=>{
                            console.log(`current page: ${page}`);
                        }}
                        onError={(error)=>{
                            console.log(error);
                        }}
                        style={styles.pdf}/>
                </ScrollView>

                    <View style={styles.hetongico}>
                        <TouchableOpacity onPress={() => { _scrollView.scrollTo({y: 0}); }} style={styles.fanhuidingbu}>
                            <Image source={require('../../assets/images/icons/fanhuidingbu.png')} style={styles.fanhuidingbuico} />
                        </TouchableOpacity>
                        <TouchableOpacity onPress={() => { _scrollView.scrollToEnd({animated: true}); }} style={styles.yijiandaodi}>
                            <Image source={require('../../assets/images/icons/yijiandaodi.png')} style={styles.yijiandaodiico} />
                        </TouchableOpacity>
                    </View>
                {this.state.showSharePop?
                    <View>
                        <ShareUtils
                            style={{position:'absolute'}}
                            show={this.state.showSharePop}
                            closeModal={(show) => {
                                this.setState({
                                    showSharePop: show
                                })
                            }}
                            title = {this.state.title}
                            description = {this.state.description}
                            thumbImage = {this.state.logo}
                            webpageUrl = {this.state.webpageUrl}
                            id = {this.state.id}
                            {...this.props}
                        />
                    </View>
                    : null
                }
            </View>
        );
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f1f2f3',
    },    
    pdf: {
        flex: 1,
        backgroundColor: '#f1f2f3',
    },
    hetongico: {
        backgroundColor: 'transparent',
        position: 'absolute',
        bottom: 30,
        right: 15
    },
    fanhuidingbu: {
        backgroundColor: 'transparent',
        marginBottom: 10,
    },
    fanhuidingbuico: {
        backgroundColor: 'transparent',
        width: 40,
        height: 40,
    },
    yijiandaodi: {
        backgroundColor: 'transparent',

    },
    yijiandaodiico: {
        backgroundColor: 'transparent',
        width: 40,
        height: 40,
    },
});